<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../../css/style.css">
    <script src="../../jquery/jquery-3.4.1.min.js"></script>
</head>
<body class="container" style="font-family: 幼圆">
<div class="col-md-offset-1" style="padding-top: 20px;">
    <h4 class="glyphicon glyphicon-gift" style="color: black">&nbsp;确认订单信息</h4>
    <div class="row" style="height: 50px;  background-color: #f2f2f2">
        <div class="col-md-offset-3 col-md-3"><label style="padding-top: 14px">商品信息</label></div>
        <div class="col-md-offset-2 col-md-1"><label style="padding-top: 14px">单价(万)</label></div>
        <div class="col-md-1"><label style="padding-top: 14px">数量</label></div>
        <div class="col-md-1"><label style="padding-top: 14px">小计(万)</label></div>
    </div>
    <div id="com"></div>
    <!--商品信息-->
    <!--        第一条信息-->
<!--        <div class="row" style="padding-top: 5px;padding-bottom: 10px;">-->
<!--            <div class="col-sm-12" style="border: #dddddd 1px solid">-->
<!--                <div class="col-sm-3">-->
<!--                    <img id="img1" src="../../images/A41.jpg" width="216" height="162"/>-->
<!--                </div>-->
<!--                <div class="col-sm-3" style="font-family: 幼圆;padding-bottom: 20px">-->
<!--                    <label style="padding-top: 30px">奥迪A4L 2020款 35 TFSI 时尚动感型</label><br>-->
<!--                    <label style="font-size: 5px;color: gray">官方建议零售价￥305,580</label><br>-->
<!--                    <div>-->
<!--                        <label style="color: crimson">*</label><label   style="padding-right: 10px">称谓</label>-->
<!--                        <input type="radio" name="sex" value="man"  style="padding-right: 25px"/>先生-->
<!--                        <input type="radio" name="sex" value="woman" />女士-->
<!--                    </div>-->
<!--                    <div>-->
<!--                        <label style="color: crimson">*</label><label  style="padding-right: 109px">姓名</label>-->
<!--                        <input id="u_name1" type="text" name="surname" placeholder="请输入您的姓名" required="">-->
<!--                    </div>-->
<!--                    <div>-->
<!--                        <label style="color: crimson">*</label><label  style="padding-right:80px">联系电话</label>-->
<!--                        <input id="u_phone1" type="text" name="phone" placeholder="请输入您的联系电话" required="">-->
<!--                    </div>-->
<!--                    <div>-->
<!--                        <label class="glyphicon glyphicon-exclamation-sign" style="color: crimson;padding-top: 10px">&nbsp;请确认到店人信息</label>-->
<!--                    </div>-->
<!--                </div>-->
<!--                &lt;!&ndash;        单价&ndash;&gt;-->
<!--                <div class="col-md-offset-1 col-md-2" style="padding-left: 90px">-->
<!--                    <label style="font-size: smaller;padding-top: 70px;padding-left: 10px;color: black">￥10,190</label><br>-->
<!--                </div>-->
<!--                &lt;!&ndash;        数量&ndash;&gt;-->
<!--                <div class="col-md-1"><label style="font-size: smaller;padding-top: 70px;padding-left: 12px;color: black">1</label></div>-->
<!--                &lt;!&ndash;        小计&ndash;&gt;-->
<!--                <div class="col-md-1"><label style="font-size: smaller;padding-top: 70px;padding-left: 10px;color: black">￥10,190</label></div>-->
<!--            </div>-->
<!--        </div>-->

<!--    &lt;!&ndash;        第二条信息&ndash;&gt;-->
<!--        <div class="row" style="padding-top: 5px;padding-bottom: 10px;">-->
<!--            <div class="col-sm-12" style="border: #dddddd 1px solid">-->
<!--                <div class="col-sm-3">-->
<!--                    <img id="img" src="../../images/A41.jpg" width="216" height="162"/>-->
<!--                </div>-->
<!--                <div class="col-sm-3" style="font-family: 幼圆;padding-bottom: 20px">-->
<!--                    <label style="padding-top: 30px">奥迪A4L 2020款 35 TFSI 时尚动感型</label><br>-->
<!--                    <label style="font-size: 5px;color: gray">官方建议零售价￥305,580</label><br>-->
<!--                    <div>-->
<!--                        <label style="color: crimson">*</label><label   style="padding-right: 10px">称谓</label>-->
<!--                        <input type="radio" name="sex" value="man"  style="padding-right: 25px"/>先生-->
<!--                        <input type="radio" name="sex" value="woman" />女士-->
<!--                    </div>-->
<!--                    <div>-->
<!--                        <label style="color: crimson">*</label><label  style="padding-right: 109px">姓名</label>-->
<!--                        <input id="u_name" type="text" name="surname" placeholder="请输入您的姓名" required="">-->
<!--                    </div>-->
<!--                    <div>-->
<!--                        <label style="color: crimson">*</label><label  style="padding-right:80px">联系电话</label>-->
<!--                        <input id="u_phone" type="text" name="phone" placeholder="请输入您的联系电话" required="">-->
<!--                    </div>-->
<!--                    <div>-->
<!--                        <label class="glyphicon glyphicon-exclamation-sign" style="color: crimson;padding-top: 10px">&nbsp;请确认到店人信息</label>-->
<!--                    </div>-->
<!--                </div>-->
<!--                &lt;!&ndash;        单价&ndash;&gt;-->
<!--                <div class="col-md-offset-1 col-md-2" style="padding-left: 90px">-->
<!--                    <label style="font-size: smaller;padding-top: 70px;padding-left: 10px;color: black">￥10,190</label><br>-->
<!--                </div>-->
<!--                &lt;!&ndash;        数量&ndash;&gt;-->
<!--                <div class="col-md-1"><label style="font-size: smaller;padding-top: 70px;padding-left: 12px;color: black">1</label></div>-->
<!--                &lt;!&ndash;        小计&ndash;&gt;-->
<!--                <div class="col-md-1"><label style="font-size: smaller;padding-top: 70px;padding-left: 10px;color: black">￥10,190</label></div>-->
<!--            </div>-->
<!--        </div>-->


    <h4 class="	glyphicon glyphicon-credit-card" style="color: black;padding-top: 50px">&nbsp;支付方式</h4>
    <div class="row" style="padding-top: 30px;padding-bottom: 30px">
        <input type="radio" name="zhifu" value="微信支付" checked=＂checked＂><img src="../../images/微信.png" style="height: 29px;width: 60px;padding-left: 30px"/><span style="padding-left: 10px">微信支付</span><span style="padding-left: 30px;padding-right: 30px">|</span>
        <input type="radio" name="zhifu" value="支付宝支付"><img src="../../images/支付宝.png" style="height: 29px;width: 60px;padding-left: 30px"/><span style="padding-left: 10px">支付宝支付</span><span style="padding-left: 30px;padding-right: 30px">|</span>
        <input type="radio" name="zhifu" value="银联支付"><img src="../../images/银联.png" style="height: 29px;width: 60px;padding-left: 30px"/><span style="padding-left: 10px">银联卡支付</span>
    </div
    <div class="row" style="padding-bottom: 30px">
        <label style="font-size: 5px ;color: darkgrey">*由汽车合作支付平台资和信进行支付</label>
    </div>
    <div class="row">
        <div class="col-md-offset-9" style="padding-bottom: 20px">
            <label>1件商品，总金额：</label><label id="allmoney1">￥</label>
        </div>
    </div>
    <div class="row">
        <div class="col-md-offset-8" style="padding-bottom: 20px">
            <input type="checkbox" id="check"><label>我已阅读并接受&nbsp;&nbsp;<a href="/gotoyhtiaozhuan">账户隐私政策 与 账户cookie政策</a></label>
        </div>
    </div>

<!--    脚部-->
    <div class="row" style="padding-bottom: 50px">
        <div class="col-md-offset-7">
            <div class="col-sm-6">
                <label id="allmoney2" style="font-size: 30px; color: cornflowerblue">￥</label>
            </div>
            <div class="col-sm-6">
                <button id="tijiao" style="background-color: #3f47ff; height:50px; width:150px;font-size: 20px;color: ghostwhite">提交订单</button>
            </div>
        </div>
    </div>
</div>

</body>

<script>
    var html="",shopcarlength;
    var money=0;
    var panduan=true;
    $(document).ready(function () {
        showshopcar();

        //展示商品信息
        function showshopcar() {
            $.ajax({
                url: "../../shopcar/selectAllById",
                type: "get",
                dataType: "json",
                data: {
                    u_id: sessionStorage.getItem("u_id")
                },
                success: function (result) {
                    shopcarlength=result.length;
                    var html = "";

                    if (result.length==0){
                        html+="<hr><label style='font-size: 20px;color: crimson'>您目前还没有购物商品</label><br>" +
                            "<a style='font-size: 15px; color: darkgrey' href='\gotoyhBuy'>点击此处跳转到商城</a><hr>";
                    }
                    for (var i = 0; i < result.length; i++) {

                        html+="<div class=\"row\" style=\"padding-top: 5px;padding-bottom: 10px;\">\n" +
                            "            <div class=\"col-sm-12\" style=\"border: #dddddd 1px solid\">\n" +
                            "                <div class=\"col-sm-3\">\n" +
                            "<label id=\"c_dealer"+i+"\" style=\"visibility:hidden\">"+result[i].c_dealer+"</label>"+
                            "                    <img id=\"img"+i+"\" src=\\" + result[i].c_surface + " width=\"216\" height=\"162\"/>\n" +

                            "                </div>\n" +
                            "                <div class=\"col-sm-3\" style=\"font-family: 幼圆;padding-bottom: 20px\">\n" +
                            "                    <label id=\"cname"+i+"\" style=\"padding-top: 30px\">"+result[i].c_name+"</label><br>\n" +
                            "                    官方建议零售价￥<label id=\"c_price"+i+"\" style=\"font-size: 5px;color: gray\" >"+result[i].c_price+"</label>万<br>\n" +

                            "                    <div>\n" +
                            "                        <label style=\"color: crimson\">*</label><label   style=\"padding-right: 10px\">称谓</label>\n" +
                            "                        <input type=\"radio\" name=\"sex"+i+"\" value=\"man\"  checked=＂checked＂ style=\"padding-right: 25px\"/><span>先生</span>\n" +
                            "                        <input type=\"radio\" name=\"sex"+i+"\" value=\"woman\" /><span>女士</span>\n" +
                            "                    </div>\n" +
                            "                    <div>\n" +
                            "                        <label style=\"color: crimson\">*</label><label  style=\"padding-right: 109px\">姓名</label>\n" +
                            "                        <input id=\"u_name"+i+"\" type=\"text\" name=\"surname"+i+"\" placeholder=\"请输入您的姓名\" required=\"\">\n" +
                            "                    </div>\n" +
                            "                    <div>\n" +
                            "                        <label style=\"color: crimson\">*</label><label  style=\"padding-right:80px\">联系电话</label>\n" +
                            "                        <input id=\"u_phone"+i+"\" type=\"text\" name=\"phone"+i+"\" placeholder=\"请输入您的联系电话\" required=\"\">\n" +
                            "                    </div>\n" +
                            "                    <div>\n" +

                            "                        <label class=\"glyphicon glyphicon-exclamation-sign\" style=\"color: crimson;padding-top: 10px\">&nbsp;请确认到店人信息</label>\n" +
                            "                    </div>\n" +
                            "                </div>\n" +
                            "                <!--        单价-->\n" +
                            "                <div class=\"col-md-offset-1 col-md-2\" style=\"padding-left: 90px\">\n" +
                            "                    ￥<label id=\"c_fri_price"+i+"\" style=\"font-size: smaller;padding-top: 70px;padding-left: 10px;color: black\">"+result[i].c_fri_price+"</label><br>\n" +
                            "                </div>\n" +
                            "                <!--        数量-->\n" +
                            "                <div class=\"col-md-1\"><label style=\"font-size: smaller;padding-top: 70px;padding-left: 15px;color: black\">1</label></div>\n" +
                            "                <!--        小计-->\n" +
                            "                <div class=\"col-md-1\"><label style=\"font-size: smaller;padding-top: 70px;padding-left: 10px;color: black\">￥"+result[i].c_fri_price+"</label></div>\n" +
                            "            </div>\n" +
                            "        </div>";

                        money+=result[i].c_fri_price;
                    }

                    $("#com").html(html);
                    $("#allmoney1").text("￥"+money.toFixed(2));
                    $("#allmoney2").text("￥"+money.toFixed(2))
                }

            })
        }
        // 提交订单点击事件
        $("#tijiao").click(function () {


                if($("#check").is(':checked')){


                        for(var i=0;i<shopcarlength;i++){



                                // 添加订单
                                insertOrder($("#cname"+i).html(),$("#c_dealer"+i).html(),
                                    $("#c_fri_price"+i).html(),$("#c_price"+i).html(),
                                    $("input[name='sex"+i+"']:checked").val(),
                                    $("input[name='surname"+i+"']").val(),$("input[name='phone"+i+"']").val())
                                sessionStorage.setItem("o_pay",$("input[name='zhifu']:checked").val());
                                sessionStorage.setItem("money",money.toFixed(2));


                        }

                            // 删除购物车
                            deleteShopByUid( sessionStorage.getItem("u_id"));
                            $(location).attr("href","/gotoyhFinal");



                }else {

                    alert("请同意账户隐私政策 与 账户cookie政策")
                }


        })
        // 添加订单方法
        function insertOrder(c_name,c_dealer,c_fri_price,c_price,u_call,u_name,u_phone){

            $.ajax({
                url: "../../order/insertOrder",
                type: "post",
                dataType: "json",
                // async:false,//同步方法，确保获取到id在加载其他方法
                data: {

                    c_name:c_name,
                    c_dealer:c_dealer,
                    c_fri_price:c_fri_price,
                    c_price:c_price,
                    u_id: sessionStorage.getItem("u_id"),
                    u_call:u_call,
                    u_name:u_name,
                    u_phone:u_phone,
                    o_pay:$("input[name='zhifu']:checked").val()

                },
                success: function (result) {
                }
            });
        }
        // 删除购物车方法
        function deleteShopByUid(u_id){

            $.ajax({
                url: "../../shopcar/deleteShopByUid",
                type: "post",
                dataType: "json",
                // async:false,//同步方法，确保获取到id在加载其他方法
                data: {
                    u_id:u_id,
                },
                success: function (result) {
                }
            });
        }

    })
</script>
</html>
